<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #ggk{
      /* position: absolute; */
      width: 200px;
      height: 100px;
      /* left: 0;
      top: 0; */
    }
    #text{
      position: absolute;
      width: 200px;
      height: 100px;
      left: 0;
      top: 0;
      text-align:center;
      line-height:100px;
    }
    #canvas{
      position: absolute;
      width: 200px;
      height: 100px;
      left: 0;
      top: 0;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div id="ggk">
    <div id="text">谢谢惠顾</div>
    <canvas id="canvas" width="200" height="100"></canvas>
  </div>
  <button onClick="getPrize()">重随</button>
  <script>
    let text  = document.getElementById("text")
    let canvas = document.getElementById("canvas")
    let ctx = canvas.getContext("2d")
    let isDraw = false
    getPrize() //获取奖品
    canvas.onmousedown = ()=>{
      isDraw = true
      console.log(isDraw);
    }
    canvas.onmouseup = ()=>{
      isDraw = false
      console.log(isDraw);
    }
    canvas.onmousemove = (e)=>{
      // console.log(e);
      let x = e.pageX - canvas.offsetLeft
      let y = e.pageY - canvas.offsetTop
      if(isDraw){
        ctx.globalCompositeOperation = 'destination-out'
        // ctx.fillStyle = 'red'
        ctx.arc(x,y,20,0,Math.PI*2)
        ctx.fill()
      }
    }
    function getPrize () {
    ctx.clearRect(0,0,200,100)
    ctx.globalCompositeOperation = 'source-over'
    ctx.fillStyle = "gray"
    ctx.fillRect(0,0,200,100)
      let number  = Math.random()  //奖品概率
      console.log(number);
       if(number<0.1){
         text.innerHTML = '一等奖'
       }else if(number<0.4){
        text.innerHTML = '二等奖'
       }else if(number<0.6){
        text.innerHTML = '三等奖'
       }
    }
  </script>
</body>
</html>